1
00:00:02,040 --> 00:00:04,870
现在我们知道 Redux 是什么了

2
00:00:04,870 --> 00:00:08,220
基本上是反应上下文的替代方案，

3
00:00:08,220 --> 00:00:11,520
现在我们也知道为什么我们可能想要使用它，

4
00:00:11,520 --> 00:00:14,640
在某些应用程序中过度反应上下文，

5
00:00:14,640 --> 00:00:16,670
剩下的大问题是

6
00:00:16,670 --> 00:00:19,660
Redux 是如何工作的。

7
00:00:19,660 --> 00:00:21,500
好吧，Redux 就是全部

8
00:00:21,500 --> 00:00:24,970
关于拥有一个中央数据存储，

9
00:00:24,970 --> 00:00:27,120
在您的应用程序中。

10
00:00:27,120 --> 00:00:29,150
对于数据，我指的是状态。

11
00:00:29,150 --> 00:00:30,850
这非常重要。

12
00:00:30,850 --> 00:00:33,270
您只有一家商店。

13
00:00:33,270 --> 00:00:36,100
你永远不会拥有超过一家商店。

14
00:00:36,100 --> 00:00:37,560
就是一家店，

15
00:00:37,560 --> 00:00:41,470
对于您的整个申请的所有州。

16
00:00:41,470 --> 00:00:43,210
所以在这家店里，

17
00:00:43,210 --> 00:00:46,690
您将存储身份验证状态主题，

18
00:00:46,690 --> 00:00:49,100
也许你想保存一些用户输入状态，

19
00:00:49,100 --> 00:00:50,410
不管它是什么。

20
00:00:50,410 --> 00:00:53,930
无论您拥有哪种跨组件或应用程序范围的状态，

21
00:00:53,930 --> 00:00:56,320
它进入这一家商店。

22
00:00:56,320 --> 00:00:58,786
现在这听起来可能难以维护，

23
00:00:58,786 --> 00:01:00,350
但好处是

24
00:01:00,350 --> 00:01:03,020
我们不需要直接管理，

25
00:01:03,020 --> 00:01:05,129
整个商店一直在。

26
00:01:05,129 --> 00:01:09,250
正如您将从本模块和下一个模块中看到的那样。

27
00:01:09,250 --> 00:01:11,810
所以我们有这个中央数据存储。

28
00:01:11,810 --> 00:01:13,230
我们用它做什么？

29
00:01:13,230 --> 00:01:16,100
最终，我们在该存储中拥有数据，

30
00:01:16,100 --> 00:01:19,800
这样我们就可以在组件内部使用它。

31
00:01:19,800 --> 00:01:22,390
因为如果那里的某些数据发生变化，

32
00:01:22,390 --> 00:01:25,450
如果用户的身份验证状态发生变化

33
00:01:25,450 --> 00:01:29,180
例如，我们想了解组件中的这一点，

34
00:01:29,180 --> 00:01:31,150
以便我们能够做出相应的反应，

35
00:01:31,150 --> 00:01:32,423
并更新用户界面。

36
00:01:33,320 --> 00:01:37,090
为此组件设置订阅，

37
00:01:37,090 --> 00:01:39,610
到我们的中央商店。

38
00:01:39,610 --> 00:01:41,430
他们订阅了商店，

39
00:01:41,430 --> 00:01:43,270
每当数据发生变化时，

40
00:01:43,270 --> 00:01:45,640
商店通知组件，

41
00:01:45,640 --> 00:01:49,070
然后组件就可以获取它们需要的数据，

42
00:01:49,070 --> 00:01:52,200
例如当前的身份验证状态，

43
00:01:52,200 --> 00:01:55,560
所以他们得到了 Redux store 的一部分，

44
00:01:55,560 --> 00:01:57,430
然后他们就可以使用它了。

45
00:01:57,430 --> 00:01:59,510
当然，我们会看到这一切，

46
00:01:59,510 --> 00:02:02,543
在本课程中，详细地采取行动。

47
00:02:03,470 --> 00:02:06,150
这就是我们从商店获取数据的方式。

48
00:02:06,150 --> 00:02:06,983
但当然，

49
00:02:06,983 --> 00:02:08,630
因为这是状态，

50
00:02:08,630 --> 00:02:12,000
因此数据也会不时发生变化。

51
00:02:12,000 --> 00:02:14,900
我们需要一种改变这些数据的方法。

52
00:02:14,900 --> 00:02:17,970
那么我们如何将数据转为存储在呢？

53
00:02:17,970 --> 00:02:19,850
这是一条非常重要的规则。

54
00:02:19,850 --> 00:02:23,050
组件，从来都不重要。

55
00:02:23,050 --> 00:02:27,870
切勿直接操作存储数据。

56
00:02:27,870 --> 00:02:29,670
所以我们有订阅，

57
00:02:29,670 --> 00:02:33,050
但我们没有另一个方向的数据流。

58
00:02:33,050 --> 00:02:35,860
至少不是直接的数据流。

59
00:02:35,860 --> 00:02:40,053
组件不直接操作存储中的数据。

60
00:02:41,040 --> 00:02:44,970
对于债务，我们使用一个称为减速器的概念。

61
00:02:44,970 --> 00:02:47,930
我们有一个减速器功能。

62
00:02:47,930 --> 00:02:51,010
这个reducer函数是我们必须要设置的。

63
00:02:51,010 --> 00:02:54,720
该函数负责变异。

64
00:02:54,720 --> 00:02:57,610
因此要更改商店数据。

65
00:02:57,610 --> 00:02:59,450
现在这里有一个重要的说明，

66
00:02:59,450 --> 00:03:01,170
术语“减速器”，

67
00:03:01,170 --> 00:03:03,890
当然是我们以前听说过的，

68
00:03:03,890 --> 00:03:08,073
使用reducer并且这里的reducer函数不是

69
00:03:08,073 --> 00:03:11,340
使用我们了解到的reducer hook。

70
00:03:11,340 --> 00:03:16,340
一般来说，Reducer 函数只是一个笼统的概念。

71
00:03:16,770 --> 00:03:20,870
减速器函数是需要一些输入的函数，

72
00:03:20,870 --> 00:03:23,300
然后转换该输入，

73
00:03:23,300 --> 00:03:25,040
他们减少它，

74
00:03:25,040 --> 00:03:28,510
例如，他们可以将数字列表减少到总和

75
00:03:28,510 --> 00:03:31,330
这个数字，这只是一个例子。

76
00:03:31,330 --> 00:03:34,570
但它们通常会转换、输入

77
00:03:34,570 --> 00:03:37,750
并吐出一个新的输出一个新的结果。

78
00:03:37,750 --> 00:03:40,350
这是一个通用的编程概念，

79
00:03:40,350 --> 00:03:42,630
哪个使用reducer，hook是否使用

80
00:03:42,630 --> 00:03:46,993
Redux 将使用的这个减速器函数也使用了它。

81
00:03:48,030 --> 00:03:49,870
好的，我们有一个减速器功能，

82
00:03:49,870 --> 00:03:53,740
它负责更新商店数据。

83
00:03:53,740 --> 00:03:57,300
我们有订阅该数据的组件。

84
00:03:57,300 --> 00:04:01,410
我们现在如何连接组件和减速器功能？

85
00:04:01,410 --> 00:04:02,840
因为最终，

86
00:04:02,840 --> 00:04:05,300
当然是组件

87
00:04:05,300 --> 00:04:08,160
这应该会触发数据更改。

88
00:04:08,160 --> 00:04:11,230
例如，单击组件中的按钮

89
00:04:11,230 --> 00:04:14,050
这应该会触发一些数据更改。

90
00:04:14,050 --> 00:04:15,563
那么我们如何连接它呢？

91
00:04:16,399 --> 00:04:18,959
触发器是一个很好的词。

92
00:04:18,959 --> 00:04:21,370
因为我们这里有第三个概念。

93
00:04:21,370 --> 00:04:26,370
我们有动作和组件调度动作。

94
00:04:26,400 --> 00:04:27,960
因此我们也可以说

95
00:04:27,960 --> 00:04:31,670
该组件会触发某些操作。

96
00:04:31,670 --> 00:04:35,970
现在一个动作实际上只是一个简单的 JavaScript 对象，

97
00:04:35,970 --> 00:04:38,740
它描述了操作的类型，

98
00:04:38,740 --> 00:04:41,410
减速器应该执行。

99
00:04:41,410 --> 00:04:45,770
因此，Redux 然后将操作转发给减速器，

100
00:04:45,770 --> 00:04:49,980
读取所需操作的描述，

101
00:04:49,980 --> 00:04:51,400
如果你想这样称呼它

102
00:04:51,400 --> 00:04:56,060
然后这个操作由reducer来执行。

103
00:04:56,060 --> 00:04:58,590
所以组件调度动作，

104
00:04:58,590 --> 00:05:00,770
描述了应该做什么，

105
00:05:00,770 --> 00:05:02,770
但不要直接这样做

106
00:05:02,770 --> 00:05:05,940
然后这些动作被转发到reducer，

107
00:05:05,940 --> 00:05:08,800
然后reducer会执行action想要的操作，

108
00:05:08,800 --> 00:05:10,050
减速机来做。

109
00:05:10,050 --> 00:05:13,970
然后reducer吐出一个新的状态，

110
00:05:13,970 --> 00:05:17,980
这将有效地取代现有的状态

111
00:05:17,980 --> 00:05:19,970
那个中央数据存储。

112
00:05:19,970 --> 00:05:21,560
当这种情况发生时，

113
00:05:21,560 --> 00:05:24,560
当该数据存储中的状态更新时，

114
00:05:24,560 --> 00:05:27,580
通知订阅组件，

115
00:05:27,580 --> 00:05:29,723
以便他们可以更新他们的用户界面。

116
00:05:31,340 --> 00:05:34,080
这就是 Redux 的工作原理。

117
00:05:34,080 --> 00:05:35,750
现在当然一切都很好。

118
00:05:35,750 --> 00:05:37,550
这是一个很棒的理论。

119
00:05:37,550 --> 00:05:41,220
但现实中情况又如何呢？

120
00:05:41,220 --> 00:05:44,450
我们要编写的代码是什么样的？

121
00:05:44,450 --> 00:05:46,650
这就是我们现在要探索的。